<template>
  <el-dialog :model-value="modelValue" :title="title" width="40%" @close="handleCancel">
    <el-form :model="form" ref="formRef">
      <el-form-item :rules="[{ required: true, message: '请输入备注', trigger: 'blur' }]" prop="reason" label="备注"> <el-input
          v-model="form.reason" placeholder="请输入内容" :rows="4" type="textarea" /></el-form-item>
    </el-form>
    <div v-if="mode == 'single'">
      <div class="subtitle">操作日志</div>
      <layout-table url="extensions/merchant/order/pageOrderFreezeOperateRecords" :setSearch="setSearch"
        disable-auto-height :param="{ id: orderId }" :hide-watch="false">
        <el-table-column prop="createTime" label="操作时间" min-width="180"> <template #default="scope">
            {{ dateFormat(scope.row.createTime) }}
          </template></el-table-column>
        <el-table-column prop="name" label="动作" min-width="80">
          <template #default="{ row }">
            <span v-if="row.orderFreezeStatus == 0" style="color:#14b8a3">解冻订单</span>
            <span v-if="row.orderFreezeStatus == 1" style="color:var(--el-color-primary)">冻结订单</span>
          </template>
        </el-table-column>
        <el-table-column prop="operator" label="操作人" min-width="100" />
        <el-table-column prop="operateRemark" label="备注" min-width="200" />
      </layout-table>
    </div>
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="clickConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { dateFormat } from "@/utils/filters";
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '',
  },
  mode: {
    type: String,
    default: 'single',//single:单个，batch:批量
    validator: (value) => {
      return value == 'single' || value == 'batch'
    }
  },
  id: { //单个日志的订单id
    type: [String, Number],
    default: ""
  }
})

const orderId = ref('')
watch(() => props.id, (val) => {
  if (val) {
    orderId.value = val
  }
})

const setSearch = ref(Number())
const formRef = ref()

const form = reactive({
  reason: '',
})

const emits = defineEmits(["close", "confirm-handle", "update:modelValue"]);
const handleCancel = () => {
  form.reason = ''
  formRef.value.resetFields()
  emits('update:modelValue', false)
  emits('close')
}
const clickConfirm = () => {

  formRef.value.validate(valid => {
    if (valid) {
      emits('confirm-handle', form)
    }
  })
}

</script>
<style lang="scss" scoped>
.subtitle {
  margin: 8px 0;
}
</style>